<template>
	<view class="page">
		<view class="name2">
			<text class="name2_1">{{sname}} {{dir}}</text>
		</view>

		<!-- 实时状态 -->
		<view class="row1">
			<view class="tag1"></view>
			<view class="tag2">
				<u-row>
					<u-col span="7">
						<text class="tag_2">实时状态</text>
					</u-col>
					<u-col span="5">
						<text class="tag_3">{{environment.jzkztime}}</text>
					</u-col>
				</u-row>
			</view>
			<view>
				<u-row>
					<u-col span="3">
						<text class="text">温度1</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.fant1}}</text>
						</view>
					</u-col>
					<u-col span="3">
						<text class="text">温度2</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.fant2}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<text class="text">电流</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.ec24}}</text>
						</view>
					</u-col>
					<u-col span="3">
						<text class="text">门禁</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.door}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<text class="text">玻璃破碎</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.boli}}</text>
						</view>
					</u-col>
					<u-col span="3">
						<text class="text">水位</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.shui}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<text class="text">烟雾</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.yan}}</text>
						</view>
					</u-col>
					<u-col span="3">
						<text class="text">亮度</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.guang}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<text class="text">湿度</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.shidu}}</text>
						</view>
					</u-col>
					<u-col span="3">
						<text class="text">噪音</text>
					</u-col>
					<u-col span="3">
						<view class="text_v">
							<text class="text">{{environment.fenbei}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<!-- 当前设置-->
		<view class="row2">
			<view class="tag1"></view>
			<view class="tag2">
				<u-row>
					<u-col span="7">
						<text class="tag_2">当前设置</text>
					</u-col>
					<!-- <u-col span="5">
						<text class="tag_3">{{environment.jzkztime}}</text>
					</u-col> -->
				</u-row>
			</view>
			<view>
				<u-row>
					<u-col span="2.5">
						<text class="text">屏前温度</text>
					</u-col>
					<u-col span="3.5">
						<view class="text_v">
							<text class="text">{{environment.temp1}}</text>
						</view>
					</u-col>
					<u-col span="2.5">
						<text class="text">箱体温度</text>
					</u-col>
					<u-col span="3.5">
						<view class="text_v">
							<text class="text">{{environment.temp2}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="2.5">
						<text class="text">LCD时间</text>
					</u-col>
					<u-col span="3.5">
						<view class="text_v">
							<text class="text">{{environment.lcd}}</text>
						</view>
					</u-col>
					<u-col span="2.5">
						<text class="text">Arm时间</text>
					</u-col>
					<u-col span="3.5">
						<view class="text_v">
							<text class="text">{{environment.arm}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="2.5">
						<text class="text">LED时间</text>
					</u-col>
					<u-col span="3.5">
						<view class="text_v">
							<text class="text">{{environment.led}}</text>
						</view>
					</u-col>
					<u-col span="2.5">
						<text class="text">灯箱时间</text>
					</u-col>
					<u-col span="3.5">
						<view class="text_v">
							<text class="text">{{environment.light}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<view class="row3">
			<view class="tag1"></view>
			<view class="tag2">
				<u-row>
					<u-col span="8">
						<text class="tag_2">集中控制</text>
					</u-col>
					<u-col span="4">
						<view class="btn">
							<button class="btn_i" type="primary" @click="submit">一键设置</button>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<view class="cc">
					<u-row justify="space-between" gutter="20">
						<u-col span="3.6">
							<u-checkbox v-model="checked" label="屏前温度:" name="temp1"></u-checkbox>
						</u-col>
						<u-col span="3.8">
							<uni-number-box class="num" v-model="formData.temp1_1"></uni-number-box>
						</u-col>
						<u-col span="0.6">
							<text class="title">--</text>
						</u-col>
						<u-col span="3.8">
							<uni-number-box class="num" v-model="formData.temp1_2"></uni-number-box>
						</u-col>
					</u-row>
				</view>
				<view class="cc">
					<u-row justify="space-between" gutter="20">
						<u-col span="3.6">
							<u-checkbox v-model="checked" label="箱体温度:" name="temp2"></u-checkbox>
						</u-col>
						<!-- <u-col span="0.5">
						<text class="title">开</text>
					</u-col> -->
						<u-col span="3.8">
							<uni-number-box class="num" v-model="formData.temp2_1"></uni-number-box>
						</u-col>
						<u-col span="0.6">
							<text class="title">--</text>
						</u-col>
						<u-col span="3.8">
							<uni-number-box class="num" v-model="formData.temp2_2"></uni-number-box>
						</u-col>
					</u-row>
				</view>
			<view class="cc">
				<u-row justify="space-between" gutter="20">
					<u-col span="3.6">
						<u-checkbox v-model="checked" label="Arm时间:" name="time1"></u-checkbox>
					</u-col>
					<u-col span="3.8">
						<view @click="click3(1)">
							<uni-easyinput type="text" v-model="formData.time1_1" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show1_1" v-model="formData.time1_1" mode="time"
								@confirm="confirm1(1)" @cancel="cancel1(1)"></u-datetime-picker>
						</view>
					</u-col>
					<u-col span="0.6">
						<text class="title">--</text>
					</u-col>
					<u-col span="3.8">
						<view @click="click4(1)">
							<uni-easyinput type="text" v-model="formData.time1_2" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show1_2" v-model="formData.time1_2" mode="time"
								@confirm="confirm2(1)" @cancel="cancel2(1)"></u-datetime-picker>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="cc">
				<u-row justify="space-between" gutter="20">
					<u-col span="3.6">
						<u-checkbox v-model="checked" label="灯箱时间:" name="time2"></u-checkbox>
					</u-col>
					<u-col span="3.8">
						<view @click="click3(2)">
							<uni-easyinput type="text" v-model="formData.time2_1" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show2_1" v-model="formData.time2_1" mode="time"
								@confirm="confirm1(2)" @cancel="cancel1(2)"></u-datetime-picker>
						</view>
					</u-col>
					<u-col span="0.6">
						<text class="title">--</text>
					</u-col>
					<u-col span="3.8">
						<view @click="click4(2)">
							<uni-easyinput type="text" v-model="formData.time2_2" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show2_2" v-model="formData.time2_2" mode="time"
								@confirm="confirm2(2)" @cancel="cancel2(2)"></u-datetime-picker>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="cc">
				<u-row justify="space-between" gutter="20">
					<u-col span="3.6">
						<u-checkbox v-model="checked" label="LCD时间:" name="time3"></u-checkbox>
					</u-col>
					<u-col span="3.8">
						<view @click="click3(3)">
							<uni-easyinput type="text" v-model="formData.time3_1" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show3_1" v-model="formData.time3_1" mode="time"
								@confirm="confirm1(3)" @cancel="cancel1(3)"></u-datetime-picker>
						</view>
					</u-col>
					<u-col span="0.6">
						<text class="title">--</text>
					</u-col>
					<u-col span="3.8">
						<view @click="click4(3)">
							<uni-easyinput type="text" v-model="formData.time3_2" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show3_2" v-model="formData.time3_2" mode="time"
								@confirm="confirm2(3)" @cancel="cancel2(3)"></u-datetime-picker>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="cc">
				<u-row justify="space-between" gutter="20">
					<u-col span="3.6">
						<u-checkbox v-model="checked" label="LED时间:" name="time4"></u-checkbox>
					</u-col>
					<u-col span="3.8">
						<view @click="click3(4)">
							<uni-easyinput type="text" v-model="formData.time4_1" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show4_1" v-model="formData.time4_1" mode="time"
								@confirm="confirm1(4)" @cancel="cancel1(4)"></u-datetime-picker>
						</view>
					</u-col>
					<u-col span="0.6">
						<text class="title">--</text>
					</u-col>
					<u-col span="3.8">
						<view @click="click4(4)">
							<uni-easyinput type="text" v-model="formData.time4_2" suffixIcon="calendar" disabled />
						</view>
						<view>
							<u-datetime-picker :show="show4_2" v-model="formData.time4_2" mode="time"
								@confirm="confirm2(4)" @cancel="cancel2(4)"></u-datetime-picker>
						</view>
					</u-col>
				</u-row>
			</view>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	import {
		control_state
	} from '@/api/common.js';
	import {
		getControllerSettingInfo
	} from '@/api/common.js';
	import {
		updateControllerSettingInfo
	} from '@/api/common.js';
	export default {
		data() {
			return {
				checkboxValue: ['temp1','temp2','time1','time2','time3','time4'],
				sname: '',
				id: '',
				dir: '',
				environment: {},
				formData: {
					temp2_1: 35,
					temp2_2: 30,
					temp1_1: 35,
					temp1_2: 30,
					time1_1: '5:30',
					time1_2: '20:50',
					time2_1: '5:30',
					time2_2: '20:50',
					time3_1: '5:30',
					time3_2: '20:50',
					time4_1: '5:30',
					time4_2: '20:50',
				},
				order: {},
				show: false,
				value: 0,
				show1_1: false,
				show1_2: false,
				show2_1: false,
				show2_2: false,
				show3_1: false,
				show3_2: false,
				show4_1: false,
				show4_2: false,
				checked: true,
			}
		},
		onLoad(option) {
			if (option.sname != undefined) {
				this.sname = option.sname
			}
			if (option.id != undefined) {
				this.id = option.id
			}
			if (option.dir != undefined) {
				this.dir = option.dir
			}
			this.show = option.show
			// this.getControllerSettingInfo()
		},
		onShow() {
			this.control_state();
		},
		methods: {
			checkboxChange(n) {
				console.log('change', n);
			},
			//环境状态
			control_state() {
				control_state({
					sid: this.id
				}).then(res => {
					console.log(res);
					this.environment = res;
					this.getControllerSettingInfo()
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			click3(e) {
				console.log('222:' + e)
				if (e == 1) {
					this.show1_1 = true
				} else if (e == 2) {
					this.show2_1 = true
				} else if (e == 3) {
					this.show3_1 = true
				} else if (e == 4) {
					this.show4_1 = true
				}
			},
			cancel1(e) {
				console.log('333:' + e)
				if (e == 1) {
					this.show1_1 = false
				} else if (e == 2) {
					this.show2_1 = false
				} else if (e == 3) {
					this.show3_1 = false
				} else if (e == 4) {
					this.show4_1 = false
				}
			},
			confirm1(e) {
				console.log(e)
				if (e == 1) {
					this.show1_1 = false
				} else if (e == 2) {
					this.show2_1 = false
				} else if (e == 3) {
					this.show3_1 = false
				} else if (e == 4) {
					this.show4_1 = false
				}
			},
			click4(e) {
				if (e == 1) {
					this.show1_2 = true
				} else if (e == 2) {
					this.show2_2 = true
				} else if (e == 3) {
					this.show3_2 = true
				} else if (e == 4) {
					this.show4_2 = true
				}
			},
			cancel2(e) {
				if (e == 1) {
					this.show1_2 = false
				} else if (e == 2) {
					this.show2_2 = false
				} else if (e == 3) {
					this.show3_2 = false
				} else if (e == 4) {
					this.show4_2 = false
				}
			},
			confirm2(e) {
				if (e == 1) {
					this.show1_2 = false
				} else if (e == 2) {
					this.show2_2 = false
				} else if (e == 3) {
					this.show3_2 = false
				} else if (e == 4) {
					this.show4_2 = false
				}
			},

			getControllerSettingInfo() {
				if (this.environment.arm != null && this.environment.arm.indexOf("-") !== -1) {
					this.formData.time1_1 = this.environment.arm.split('-')[0]
					this.formData.time1_2 = this.environment.arm.split('-')[1]
				}
				if (this.environment.light != null && this.environment.light.indexOf("-") !== -1) {
					this.formData.time2_1 = this.environment.light.split('-')[0]
					this.formData.time2_2 = this.environment.light.split('-')[1]
				}
				if (this.environment.lcd != null && this.environment.lcd.indexOf("-") !== -1) {
					this.formData.time3_1 = this.environment.lcd.split('-')[0]
					this.formData.time3_2 = this.environment.lcd.split('-')[1]
				}
				if (this.environment.led != null && this.environment.led.indexOf("-") !== -1) {
					this.formData.time4_1 = this.environment.led.split('-')[0]
					this.formData.time4_2 = this.environment.led.split('-')[1]
				}
				if (this.environment.temp1 != null && this.environment.temp1.indexOf("-") !== -1) {
					this.formData.temp1_1 = this.environment.temp1.split('-')[0]
					this.formData.temp1_2 = this.environment.temp1.split('-')[1]
				}
				if (this.environment.temp2 != null && this.environment.temp2.indexOf("-") !== -1) {
					this.formData.temp2_1 = this.environment.temp2.split('-')[0]
					this.formData.temp2_2 = this.environment.temp2.split('-')[1]
				}
			},


			submit() {
				// 1: arm开启时间-arm断电时间,2:灯箱的开启时间-等闲的断电时间,3:屏前风扇起转温度-屏前风扇停转温度 
				//  4: 箱体风扇起转温度-箱体风扇停转温度,5:lcd屏开启时间-lcd屏断电时间 6:led屏开启时间-led屏断电时间
				console.log(JSON.stringify(this.formData))
				var infos = []
				if(this.checkboxValue.includes("time1")){
					infos.push(this.formData.time1_1 + '-' + this.formData.time1_2)
				}else{
					infos.push("")
				}
				if(this.checkboxValue.includes("time2")){
					infos.push(this.formData.time2_1 + '-' + this.formData.time2_2)
				}else{
					infos.push("")
				}
				if(this.checkboxValue.includes("time3")){
					infos.push(this.formData.time3_1 + '-' + this.formData.time3_2)
				}else{
					infos.push("")
				}
				if(this.checkboxValue.includes("time4")){
					infos.push(this.formData.time4_1 + '-' + this.formData.time4_2)
				}else{
					infos.push("")
				}
				if(this.checkboxValue.includes("temp1")){
					infos.push(this.formData.temp1_1 + '-' + this.formData.temp1_2)
				}else{
					infos.push("")
				}
				if(this.checkboxValue.includes("temp2")){
					infos.push(this.formData.temp2_1 + '-' + this.formData.temp2_2)
				}else{
					infos.push("")
				}
				// console.log(infos)
				updateControllerSettingInfo({
					infos: infos,
					ids: [this.id]
				}).then(res => {
					console.log('查詢結果：' + JSON.stringify(res));
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.page {
		margin-top: 24rpx;
		width: 710rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
	}

	.name2 {
		height: 60rpx;
		width: 84vw;
		@include flex();
		margin-bottom: 2vh;

		.name2_1 {
			color: $font-color;
			font-size: 40rpx;
			width: 100vw;
			text-align: center;
		}
	}

	$color_1: #0E8CAE;
	$color_2: #32A38B;

	.row1 {
		width: 710rpx;
		margin-left: 10rpx;
		height: auto;

		.tag1 {
			height: 1px;
			margin-top: 20rpx;
			background-color: $color_1;
		}

		.tag2 {
			height: 56rpx;
			margin-top: 12rpx;
		}

		.tag_2 {
			font-size: 36rpx;
			color: $color_1;
		}

		.tag_3 {
			font-size: 24rpx;
			color: $color_1;
		}

		.text_v {
			position: relative;
			height: 60rpx;
			@include flex();
		}

		.text {
			color: $color_1;
			font-size: 26rpx;
		}
	}

	.row2 {
		width: 710rpx;
		margin-left: 10rpx;
		height: auto;

		.tag1 {
			height: 1px;
			margin-top: 20rpx;
			background-color: $color_2;
		}

		.tag2 {
			height: 56rpx;
			margin-top: 12rpx;
		}

		.tag_2 {
			font-size: 36rpx;
			color: $color_2;
		}

		.tag_3 {
			font-size: 24rpx;
			color: $color_2;
		}

		.text_v {
			position: relative;
			height: 60rpx;
			@include flex();
		}

		.text {
			color: $color_2;
			font-size: 26rpx;
		}
	}

	.row3 {
		width: 710rpx;
		margin-left: 10rpx;
		height: auto;

		.tag1 {
			height: 1px;
			margin-top: 20rpx;
			background-color: #000000;
		}

		.tag2 {
			height: 56rpx;
			margin-top: 12rpx;
		}


		.tag_2 {
			font-size: 36rpx;
			color: #000000;
		}

		.title {
			height: 50rpx;
			position: absolute;
			transform: translate(0, -50%);
		}

		.cc {
			margin-top: 16rpx;
			height: 70rpx;
		}

		.btn {
			width: 200rpx;

			.btn_i {
				height: 64rpx;
				background-color: #3C9CFF;
				border-color: #3C9CFF;
				border-radius: 8rpx;
				color: white;
				font-size: 24rpx;
			}
		}
	}
</style>